<template>
  <div class="hotel_search">
    <div class="search_header">酒店搜索</div>
    <div class="search_items">
      <el-form ref="form" label-width="70px" size="middle">
        <!-- 城市定位 -->
        <el-form-item label="选择城市">
          <el-autocomplete
            placeholder="输入城市名"
            class="el-autocomplete_city"
            :trigger-on-focus="false"
            :highlight-first-item="true"
            v-model="cityForHotel"
            :fetch-suggestions="querySearch"
            @select="handleSelection"
            clearable
          ></el-autocomplete>
        </el-form-item>
        <!-- 入住日期 -->
        <el-form-item label="入住时间">
          <el-date-picker
            v-model="value"
            type="datetimerange"
            range-separator="——"
            :pickerOptions="pickerOptions"
            start-placeholder="到店"
            end-placeholder="离店"
          ></el-date-picker>
        </el-form-item>
        <!-- 入住人数 -->
        <el-form-item label="入住人数" class="inputBoxNum">
          <el-input v-model="personNum">
            <template slot="append">
              <span class="iconfont iconrenshu"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-button @click="submitSearchBtn" type="primary" class="btn_search_div">
          <span class="search_icon iconfont iconziyuan"></span>
          搜索
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      cityForHotel: "",
      cityCode: "",
      value: "",

      personNum: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 24 * 60 * 60 * 1000;
        },
      },
    };
  },
  created() {},
  methods: {
    //获取城市列表
    querySearch(queryString, showList) {
      this.$axios({
        url: "/airs/city",
        params: {
          name: queryString,
        },
      }).then((res) => {
        //输入框变动拿到第一个
        this.cityCode = res.data.data[0].id;
        const data = res.data.data.map((item) => {
          return {
            ...item,
            value: item.name,
          };
        });
        showList(data);
      });
    },
    //处理手动选项
    handleSelection(item) {
      this.cityCode = item.id;
    },

    //提交搜索按钮
    submitSearchBtn() {
      const data_from_search = {
        city: this.cityCode,
        enterTime: moment(this.value[0]).format("YYYY-MM-DD"),
        leftTime: moment(this.value[1]).format("YYYY-MM-DD"),
      };

      this.$emit("searhInfo", data_from_search);
    },
  },
};
</script>
<style lang="less" scoped>
//搜索框
.hotel_search {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  width: 530px;
  height: 300px;
  //处理日期图标
  /deep/ .el-input__prefix {
    .el-icon-date {
      display: none;
    }
  }
  /deep/ .el-input--prefix .el-input__inner {
    padding-left: 18px;
  }
  //输入城市框
  /deep/ .el-autocomplete_city {
    width: 292px;
  }
  //按钮
  /deep/ .btn_search_div {
    display: flex;
    justify-content: center;
    margin-left: 106px;
    background-color: rgba(216, 216, 216, 0.6);
    width: 166px;
    height: 38px;
    border: none;
    vertical-align: center;
    color: rgb(0, 0, 0);
    &:hover {
      background-color: rgba(216, 216, 216, 0.9);
    }
  }

  /deep/ .el-input__inner {
    height: 36px;
  }
  .search_header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: rgb(243, 243, 243);
    font-size: 16px;
  }
  .search_items {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    padding: 0 14px;
    padding-top: 15px;
    padding-bottom: 15px;
    /deep/ .line {
      color: #606266;
      font-size: 14px;
      text-align: center;
    }
  }
}
// /deep/ .el-input--middle {
//   position: relative;
// }
.iconrenshu {
  font-size: 22px;
  margin: 0 auto;
}
/deep/ .el-input-group__append {
  background-color: rgba(0, 0, 0, 0);
  border-left: none;
}
/deep/ .el-range-editor {
  width: 293px;
}
/deep/ .el-date-range-picker__time-header {
  display: none;
  background-color: black;
}
/deep/ .el-range-separator {
  padding: 0 5px;
  width: 5%;
  margin-top: -5px;
  color: rgb(194, 191, 191);
}
</style>